<template>
  <el-drawer
    :model-value="isShowRecord"
    size="30%"
    @close="closeAll"
    :close-on-click-modal="false"
  >
    <template #header="{}">
      <div class="flex items-center justify-start">
        <div class="flex items-center justify-start flex-1">
          <el-icon @click="returnBack"><ArrowLeftBold /></el-icon>
          <p class="flex-1">{{ drawerTitle }}</p>
        </div>
      </div>
    </template>
    <div v-for="(item, index) of recordList" :key="index" v-loading="loading">
      <p>{{ formatDates(item.createtime) }}</p>
      <el-card class="my-2">
        <div class="flex justify-between item-center">
          <p class="text-[#7F7F7F]">{{ item.trade_type }}</p>
          <div>
            <p
              class="text-right"
              :style="
                item.sg == '+'
                  ? 'color:rgb(112, 182, 3)'
                  : 'color:rgb(217, 0, 27)'
              "
            >
              {{ item.sg }} {{ item.amount }} {{ item.currency }}
            </p>
            <p class="text-[#AAAAAA] text-[12px]">
              {{ $t("卡余额") }}: {{ item.amount_after }} {{ item.currency }}
            </p>
          </div>
        </div>
      </el-card>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, watch } from "vue";
import { getCardRecords } from "@/api/card/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { formatDates } from "@/utils/utils";
const props = defineProps({
  isShowRecord: {
    type: Boolean,
    default: false,
  },
  cardId: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["close", "refreshList", "closeAll"]);
const returnBack = () => {
  emits("close");
};
const closeAll = () => {
  emits("closeAll");
};

const drawerTitle = ref(t("账户流水"));

const recordList = ref([]); // 币种

watch(
  () => props.isShowRecord,
  async (val) => {
    if (val) {
      await getRecordsData();
    }
  }
);

const loading = ref(false);

// 流水
const getRecordsData = async () => {
  loading.value = true;
  const res = await getCardRecords({
    card_id: props.cardId,
    page: 1,
    pagesize: 100,
  });
  recordList.value = res.list;
  loading.value = false;
};
</script>
<style lang="scss" scoped>
.balance {
  height: 100px;
  background-color: rgba(231, 93, 110, 1);
  border-radius: 10px;
  color: #fff;
}
.submitBtn {
  height: 40px;
  border-radius: 10px;
}
.detailRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.exchange-icon {
  border-radius: 50%;
  background-color: #e54c60;
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  margin-right: 10px;
  .text {
    display: inline-block;
    line-height: 14px;
  }
}
.userSelect .el-select-dropdown__item {
  min-width: 100px !important;
  height: 45px !important;
  //   padding: 0 5px 0 5px !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.userSelect .custom-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 3px; /* 这里使用 margin 替代类名 mb-3 */
}

.custom-button {
  background-color: #e54c60 !important;
  border-color: #e54c60 !important;
  color: #fff !important;
}
.custom-button:hover,
.custom-button:focus,
.custom-button:active {
  background-color: #e54c60 !important; /* 点击时的背景色，!important 是为了确保覆盖 Element UI 默认样式 */
  border-color: #e54c60 !important; /* 点击时的边框颜色 */
  color: #fff !important; /* 点击时的文字颜色 */
}
.alertInfo {
  background: #f0f9ff;
  color: #333;
  margin-bottom: 15px;
}
.iconDanger {
  color: #fe5042;
  font-size: 20px;
}
.iconInfo {
  color: #18a6e9;
  font-size: 20px;
}
.info {
  color: #333;
  font-size: 14px;
}
</style>
